<template>
    <div class="permission-container">
        <div class="page-header">
            <div class="header-content">
                <div class="title-section">
                    <div class="title-icon">
                        <el-icon>
                            <UserFilled />
                        </el-icon>
                    </div>
                    <div class="title-text">
                        <h1 class="page-title">用户管理</h1>
                        <p class="page-subtitle">管理系统用户配置</p>
                    </div>
                </div>
                <div class="header-actions">
                    <el-button type="primary" size="large" @click="dialogFormVisible = true" class="primary-btn">
                        <el-icon>
                            <Plus />
                        </el-icon>
                        新增用户
                    </el-button>
                </div>
            </div>
        </div>

        <div class="card search-card">
            <div class="card-header">
                <h3 class="card-title">
                    <el-icon>
                        <Search />
                    </el-icon>
                    搜索条件
                </h3>
            </div>
            <el-form :inline="true" :model="formInline" class="search-form">
                <el-form-item label="用户名称">
                    <el-input v-model="formInline.Name" placeholder="请输入用户名称" clearable size="large"
                        style="width: 300px;" class="custom-input" />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" size="large" @click="onSubmit" class="search-btn">
                        <el-icon>
                            <Search />
                        </el-icon>
                        查询
                    </el-button>
                    <el-button size="large" @click="resetSearch" class="reset-btn">
                        <el-icon>
                            <Refresh />
                        </el-icon>
                        重置
                    </el-button>
                </el-form-item>
            </el-form>
        </div>

        <div class="card table-card">
            <div class="card-header">
                <h3 class="card-title">
                    <el-icon>
                        <List />
                    </el-icon>
                    用户列表
                </h3>
                <div class="table-actions">
                    <el-button size="small" @click="refreshTable" class="refresh-btn">
                        <el-icon>
                            <Refresh />
                        </el-icon>
                        刷新
                    </el-button>
                </div>
            </div>
            <el-table :data="tableData" style="width: 100%"
                :header-cell-style="{ background: '#e0f2fe', color: '#2563eb' }" border stripe class="custom-table">
                <el-table-column fixed type="index" label="序号" width="70" align="center" />
                <el-table-column prop="name" label="用户名" width="120" />
                <el-table-column prop="pwd" label="密码" width="120" />
                <el-table-column prop="roleName" label="角色" min-width="220" max-width="300" align="center" />
                <el-table-column prop="isState" label="状态" width="90" align="center">
                    <template v-slot="hh">
                        <el-switch v-model="hh.row.isState" @click="upstate(hh.row.id, hh.row.isState)" />
                    </template>
                </el-table-column>
                <el-table-column prop="createTime" label="创建时间" width="160" align="center">
                    <template v-slot="hh">
                        {{ moment(hh.row.createTime).format('YYYY-MM-DD HH:mm:ss') }}
                    </template>
                </el-table-column>
                <el-table-column fixed="right" label="操作" width="150" align="center">
                    <template v-slot="hh">
                        <el-button link type="primary" size="small" @click="handleClicks(hh.row)" class="edit-btn">
                            <el-icon>
                                <Edit />
                            </el-icon>
                            编辑
                        </el-button>
                        <el-button link type="danger" size="small" @click="handleClick(hh.row.id)" class="delete-btn">
                            <el-icon>
                                <Delete />
                            </el-icon>
                            删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination-wrapper">
                <el-pagination v-model:current-page="page.Index" v-model:page-size="page.Size"
                    :page-sizes="[3, 5, 10, 50]" :size="size" :disabled="disabled" :background="background"
                    layout="total, sizes, prev, pager, next, jumper" :total="page.TotaCount" prev-text="上一页"
                    next-text="下一页" class="custom-pagination" />
            </div>
        </div>
    </div>

    <el-dialog v-model="dialogFormVisible" title="新增用户" width="600" class="custom-dialog permission-dialog">
        <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="100px">
            <el-form-item label="用户名" prop="name">
                <el-input v-model="ruleForm.name" placeholder="请输入用户名" class="dialog-input" />
            </el-form-item>

            <el-form-item label="密码" prop="pwd">
                <el-input v-model="ruleForm.pwd" placeholder="请输入密码" class="dialog-input" show-password />
            </el-form-item>

            <el-form-item label="真实姓名" prop="realName">
                <el-input v-model="ruleForm.realName" placeholder="请输入真实姓名" class="dialog-input" />
            </el-form-item>

            <el-form-item label="选择角色" prop="roleId">
                <el-checkbox-group v-model="ruleForm.roleId" class="checkbox-group">
                    <el-checkbox v-for="a in binds" :key="a.id" :value="a.id" class="custom-checkbox">
                        {{ a.roleName }}
                    </el-checkbox>
                </el-checkbox-group>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="submitForm(ruleFormRef)" class="submit-btn">
                    <el-icon>
                        <Check />
                    </el-icon>
                    提交
                </el-button>
                <el-button @click="resetForm(ruleFormRef)" class="reset-btn">
                    <el-icon>
                        <Refresh />
                    </el-icon>
                    重置
                </el-button>
            </el-form-item>
        </el-form>
    </el-dialog>

    <el-dialog v-model="dialogFormVisibles" title="编辑用户" width="600" class="custom-dialog permission-dialog">
        <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="100px">
            <el-form-item label="用户名" prop="name">
                <el-input v-model="ruleForm.name" placeholder="请输入用户名" class="dialog-input" />
            </el-form-item>

            <el-form-item label="真实姓名" prop="realName">
                <el-input v-model="ruleForm.realName" placeholder="请输入真实姓名" class="dialog-input" />
            </el-form-item>

            <el-form-item label="选择角色" prop="roleId">
                <el-checkbox-group v-model="ruleForm.roleId" class="checkbox-group">
                    <el-checkbox v-for="a in binds" :key="a.id" :value="a.id" class="custom-checkbox">
                        {{ a.roleName }}
                    </el-checkbox>
                </el-checkbox-group>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="submitForms(ruleFormRef)" class="submit-btn">
                    <el-icon>
                        <Check />
                    </el-icon>
                    修改
                </el-button>
                <el-button @click="resetForms(ruleFormRef)" class="reset-btn">
                    <el-icon>
                        <Refresh />
                    </el-icon>
                    重置
                </el-button>
            </el-form-item>
        </el-form>
    </el-dialog>
</template>

<script lang="ts" setup>
import { onMounted, reactive, ref, watch } from 'vue'
//分页
import type { ComponentSize } from 'element-plus'
import { ElMessage, ElMessageBox, type FormInstance, type FormRules } from 'element-plus'
import { Plus, Search, Refresh, List, Edit, Delete, Check, Key } from '@element-plus/icons-vue'
import moment from 'moment'
import { axiosr } from '@/http/axiosRead'
import { axiosw } from '@/http/axiosWrtie'

const size = ref<ComponentSize>('default')
const background = ref(false)
const disabled = ref(false)

const formInline = reactive({
    Name: ''
})
const dialogFormVisible = ref(false)
const dialogFormVisibles = ref(false)
const page = reactive({
    Index: 1,
    Size: 3,
    TotaCount: 0,
    TotaPage: 0
})

const onSubmit = () => {
    show()
}

const resetSearch = () => {
    formInline.Name = ''
    page.Index = 1
    show()
}

const refreshTable = () => {
    show()
}

const handleClicks = (data: any) => {
    dialogFormVisibles.value = true
    ruleForm.accountId = data.id
    ruleForm.name = data.name
    ruleForm.pwd = data.pwd
    ruleForm.realName = data.realName
    ruleForm.roleId = data.roleIds
}

const binds = ref()

const bindpermission = () => {
    axiosr.get('/api/Role/GetRoleAll').then((res) => {
        binds.value = res.data.data
    })
}

//删除
const handleClick = (id: any) => {
    ElMessageBox.confirm(
        '确认删除吗?',
        'error',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'error',
        }
    )
        .then(() => {
            axiosw.delete('/api/Account/DeleteAccount', {
                params: {
                    AccountId: id
                }
            }).then((res) => {
                if (res.data.code == 200) {
                    ElMessage.success(res.data.msg)
                    show()
                    dialogFormVisible.value = false
                }
                else {
                    ElMessage.error(res.data.msg)
                }
            })
        })
}

const tableData = ref([])

const show = () => {
    axiosr.get('/api/Account/GetAccountPage', {
        params: {
            Name: formInline.Name,
            Index: page.Index,
            Size: page.Size
        }
    }).then((res) => {
        tableData.value = res.data.pageData
        page.TotaCount = res.data.totaCount
        page.TotaPage = res.data.totaPage
    })
}

const ruleFormRef = ref<FormInstance>()
const ruleForm = reactive({
    "accountId": 0,
    "name": "",
    "pwd": "",
    "realName": "",
    "roleId": []
})


const rules = reactive<FormRules>({
    name: [
        { required: true, message: '不能为空!', trigger: 'blur' },
    ],
    pwd: [
        { required: true, message: '不能为空!', trigger: 'blur' },
    ],
    realName: [
        { required: true, message: '不能为空!', trigger: 'blur' },
    ],
    roleId: [
        { required: true, message: '不能为空!', trigger: 'blur' },
    ],
})
//提交
const submitForm = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
            axiosw.post('/api/Account/AddAccount', ruleForm).then((res) => {
                if (res.data.code == 200) {
                    ElMessage.success(res.data.msg)
                    show()
                    dialogFormVisible.value = false
                }
                else {
                    ElMessage.error(res.data.msg)
                }
            })
        } else {
            console.log('error submit!', fields)
        }
    })
}

//重置
const resetForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.resetFields()
    dialogFormVisible.value = false
}


//修改
const submitForms = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
            axiosw.put('/api/Account/UpdateAccount', ruleForm).then((res) => {
                if (res.data.code == 200) {
                    ElMessage.success(res.data.msg)
                    show()
                    dialogFormVisibles.value = false
                }
                else {
                    ElMessage.error(res.data.msg)
                }
            })
        } else {
            console.log('error submit!', fields)
        }
    })
}

//重置
const resetForms = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.resetFields()
    dialogFormVisibles.value = false
}

//修改状态
const upstate = (id: any, state: any) => {
    axiosw.put('/api/Account/UpdateAccountState', null, {
        params: {
            AccountId: id,
            State: state
        }
    }).then((res) => {
        if (res.data.code == 200) {
            ElMessage.success(res.data.msg)
            show()
        }
        else {
            ElMessage.error(res.data.msg)
        }
    })
}

onMounted(() => {
    bindpermission()
    show()
})

watch(page, () => {
    show()
}, { deep: true })
</script>

<style scoped>
.permission-container {
    padding: 40px 24px 24px 24px;
    max-width: 1200px;
    margin: 0 auto;
}

.page-header {
    background: linear-gradient(135deg, #3b82f6 0%, #60a5fa 100%);
    border-radius: 16px;
    padding: 2rem;
    margin-bottom: 2rem;
    box-shadow: 0 4px 20px rgba(59, 130, 246, 0.08);
}

.header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 2rem;
    background: linear-gradient(135deg, #3b82f6 0%, #60a5fa 100%);
    border-radius: 20px;
    color: white;
    box-shadow: 0 8px 32px rgba(59, 130, 246, 0.12);
    position: relative;
    overflow: hidden;
}

.header-content::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 200px;
    height: 200px;
    background: linear-gradient(135deg, rgba(96, 165, 250, 0.18) 0%, rgba(59, 130, 246, 0.18) 100%);
    border-radius: 50%;
    transform: translate(50%, -50%);
}

.title-section {
    display: flex;
    align-items: center;
    gap: 1rem;
    position: relative;
    z-index: 2;
}

.title-icon {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, #3b82f6 0%, #60a5fa 100%);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 16px rgba(59, 130, 246, 0.18);
}

.title-icon .el-icon {
    font-size: 2rem;
    color: #fff;
}

.title-text h1 {
    font-size: 2.2rem;
    font-weight: bold;
    margin-bottom: 0.5rem;
    color: #fff;
}

.title-text p {
    font-size: 1rem;
    color: #dbeafe;
    margin: 0;
}

.header-actions .primary-btn {
    background: linear-gradient(135deg, #3b82f6 0%, #60a5fa 100%);
    border: none;
    border-radius: 12px;
    padding: 12px 24px;
    font-weight: 600;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.18);
    transition: all 0.3s ease;
    position: relative;
    z-index: 2;
}

.header-actions .primary-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(59, 130, 246, 0.22);
}

.card {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 4px 24px rgba(59, 130, 246, 0.06);
    margin-bottom: 2rem;
    border: 1px solid #e0e7ef;
    overflow: hidden;
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem 2rem;
    background: linear-gradient(135deg, #e0f2fe 0%, #f0f9ff 100%);
    border-bottom: 1px solid #e0e7ef;
}

.card-title {
    font-size: 1.2rem;
    font-weight: 600;
    color: #2563eb;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.card-title .el-icon {
    color: #3b82f6;
}

.table-actions {
    display: flex;
    gap: 0.5rem;
}

.search-card {
    margin-bottom: 2rem;
}

.search-form {
    padding: 2rem;
}

.search-form .el-form-item {
    margin-bottom: 1rem;
    margin-right: 2rem;
}

.custom-input {
    border-radius: 8px;
    border-color: #bae6fd;
}

.custom-input:focus {
    border-color: #3b82f6;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.12);
}

.search-btn {
    background: linear-gradient(135deg, #3b82f6 0%, #60a5fa 100%);
    border: none;
    border-radius: 8px;
    font-weight: 500;
    color: #fff;
}

.search-btn:hover {
    background: linear-gradient(135deg, #2563eb 0%, #38bdf8 100%);
}

.reset-btn {
    border-radius: 8px;
    font-weight: 500;
    border-color: #bae6fd;
    color: #2563eb;
}

.reset-btn:hover {
    border-color: #3b82f6;
    color: #3b82f6;
}

.refresh-btn {
    background: linear-gradient(135deg, #e0f2fe 0%, #f0f9ff 100%);
    border: 1px solid #bae6fd;
    border-radius: 6px;
    color: #2563eb;
}

.refresh-btn:hover {
    background: linear-gradient(135deg, #bae6fd 0%, #e0f2fe 100%);
    color: #1e40af;
}

.table-card {
    margin-bottom: 2rem;
}

.custom-table {
    border-radius: 0;
}

.custom-table th {
    background: #e0f2fe !important;
    color: #2563eb !important;
    font-weight: 600;
    border-bottom: 2px solid #bae6fd;
}

.custom-table td {
    border-bottom: 1px solid #e0e7ef;
}

.custom-table--striped .el-table__body tr.el-table__row--striped td {
    background: #f0f9ff;
}

.edit-btn {
    color: #3b82f6 !important;
}

.edit-btn:hover {
    color: #2563eb !important;
    background: rgba(59, 130, 246, 0.08) !important;
}

.delete-btn {
    color: #ef4444 !important;
}

.delete-btn:hover {
    color: #b91c1c !important;
    background: rgba(220, 38, 38, 0.08) !important;
}

.pagination-wrapper {
    display: flex;
    justify-content: flex-end;
    padding: 1.5rem 2rem;
    background: #f0f9ff;
    border-top: 1px solid #e0e7ef;
}

.custom-pagination .el-pagination__total {
    color: #2563eb;
}

.custom-pagination .el-pagination__sizes {
    color: #2563eb;
}

.custom-pagination .el-pager li {
    background: #fff;
    border: 1px solid #bae6fd;
    color: #2563eb;
}

.custom-pagination .el-pager li.is-active {
    background: #3b82f6;
    border-color: #3b82f6;
    color: #fff;
}

.custom-pagination .el-pager li:hover {
    border-color: #3b82f6;
    color: #3b82f6;
}

.permission-dialog {
    border-radius: 16px;
}

.permission-dialog .el-dialog__header {
    background: linear-gradient(135deg, #e0f2fe 0%, #f0f9ff 100%);
    border-bottom: 1px solid #bae6fd;
    padding: 1.5rem 2rem;
}

.permission-dialog .el-dialog__title {
    font-weight: 600;
    color: #2563eb;
}

.permission-dialog .el-dialog__body {
    padding: 2rem;
}

.permission-dialog .el-form-item {
    margin-bottom: 1.5rem;
}

.dialog-input {
    border-radius: 8px;
    border-color: #bae6fd;
}

.dialog-input:focus {
    border-color: #3b82f6;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.12);
}

.submit-btn {
    background: linear-gradient(135deg, #3b82f6 0%, #60a5fa 100%);
    border: none;
    border-radius: 8px;
    font-weight: 500;
    padding: 10px 20px;
    color: #fff;
}

.submit-btn:hover {
    background: linear-gradient(135deg, #2563eb 0%, #38bdf8 100%);
}

@media (max-width: 768px) {
    .permission-container {
        padding: 1rem;
    }

    .header-content {
        flex-direction: column;
        gap: 1rem;
        text-align: center;
        padding: 1.5rem;
    }

    .title-section {
        flex-direction: column;
        gap: 0.5rem;
    }

    .title-text h1 {
        font-size: 1.8rem;
    }

    .card-header {
        flex-direction: column;
        gap: 1rem;
        align-items: flex-start;
    }

    .search-form {
        padding: 1rem;
    }

    .search-form .el-form-item {
        margin-right: 0;
        width: 100%;
    }

    .pagination-wrapper {
        justify-content: center;
        padding: 1rem;
    }
}
</style>
